<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery-3.5.1.js"></script>
    <style>

        html {
            filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
            -webkit-filter: grayscale(100%);
        }
        body{
            /*background-color: #009688;*/
        }
        #mtest{

            width: 50%;
            height: 300px;
            margin-left: 25%;
            background-color: #dee6ec;
        }
        #test{
            resize: none;
            width: 50%;
            margin-left: 25%;
            margin-top: 50px;
        }
        #bth{
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
            background-color: #4CAF50; /* Green */
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin-left: 45%;
        }
        #please{
            margin-left: 45%;
        }
        #msg-result{
            margin-left: 45%;
        }

    </style>
</head>
<body>
<div>
  <h1>
    留言板
  </h1>
</div>
<div id="mtest" >
    <div id="please"><h2>请输入留言</h2></div>
    <textarea cols="25" rows="5" id="test" class="test"></textarea>
    </br>
    <input type="button" id="bth" class="bth" value="留言">
    <div class="msg-result" id="msg-result">
</div>

</div>
</body>
</html>
<script>

    $(function (){
        $("#bth").click(function (){
            let msg=$("#test").val()
            console.log(msg)
            $.post("/user_send_msg.bor",{"msg":msg},function (text){
                if(text=="留言成功"){
                    $("#msg-result").css("display","green").html(text)
                }else {
                    $("#msg-result").css("display","red").html("请重新输入留言")
                }


            })
        })

    })
</script>